
<!DOCTYPE html>
<html>
<title>Group Main page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/w3.css">


<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/validator/10.11.0/validator.min.js"></script>
<style>
html, body, h1, h2, h3, h4, h5 {font-family: "Open Sans", sans-serif}
</style>

<body class="w3-theme-l5">
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:300px">

      <div class="w3-center"><br>
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
        <img src="img_avatar4.png" alt="Avatar" style="width:30%" class="w3-circle w3-margin-top">
      </div>

      
        <div class="w3-container">
          <label><b>名字</b></label>
          <input class="w3-input w3-border" type="text" placeholder="Enter Username" id="mname" required>
          <label><b>email</b></label>
          <input class="w3-input w3-border" type="text" placeholder="" id="memail" >
		  <label><b>联系电话</b></label>
          <input class="w3-input w3-border" type="text" placeholder="" id="mphone" >
          <label><b>初始积分</b></label>
          <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="" id="mjifen" >
          <button class="w3-button w3-block w3-green w3-padding" id="btn_addmember" onclick="addMember(this)">确定</button>
          
        </div>
      

      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
        <button onclick="document.getElementById('id01').style.display='none'" type="button" class="w3-button w3-red">取消</button>
      </div>

    </div>
  </div>
  
  <div id="modal-consumejf" class="w3-modal">
    <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:300px">

      <div class="w3-center"><br>
        <span onclick="document.getElementById('modal-consumejf').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="关闭">&times;</span>
        <img src="img_avatar4.png" alt="Avatar" style="width:30%" class="w3-circle w3-margin-top">
      </div>

      
        <div class="w3-container">

          <label><b>消费积分</b></label>
          <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="" id="in_jifen" >
          <button class="w3-button w3-block w3-green w3-padding" id="btn_consumejf" onclick="ConsumeMemberJifen(this,ele('in_jifen').value)">确定</button>          
        </div>
      

      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
        <button onclick="document.getElementById('modal-consumejf').style.display='none'" type="button" class="w3-button w3-red">取消</button>
      </div>

    </div>
  </div>
  <div id="modal-increjf" class="w3-modal">
    <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:300px">

      <div class="w3-center"><br>
        <span onclick="document.getElementById('modal-increjf').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="关闭">&times;</span>
        <img src="img_avatar4.png" alt="Avatar" style="width:30%" class="w3-circle w3-margin-top">
      </div>

      
        <div class="w3-container">

          <label><b>新增积分</b></label>
          <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="" id="in_jifen" >
          <button class="w3-button w3-block w3-green w3-padding" id="btn_increjf" onclick="IncreMemberJifen(this,ele('in_jifen').value)">确定</button>          
        </div>
      

      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
        <button onclick="document.getElementById('modal-increjf').style.display='none'" type="button" class="w3-button w3-red">取消</button>
      </div>

    </div>
  </div>  
<!-- Navbar -->
<div class="w3-top">
 <div class="w3-bar w3-theme-d2 w3-left-align w3-large">
  <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large w3-theme-d4"><i class="fa fa-home w3-margin-right"></i>gukedi</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="News">News</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Account Settings">Introduction</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Messages">Download</a>

  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white" title="My Account">
    My Account
  </a>
 </div>
</div>

<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium w3-large">
  <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">My Profile</a>
</div>

<!-- Page Container -->
<div class="w3-container w3-content" style="max-width:1400px;margin-top:80px">    
  <!-- The Grid -->
  <div class="w3-row">
    <!-- Left Column -->
    <div class="w3-col m3">
      <!-- Profile -->
      <div id="groupprofile" class="w3-card w3-round w3-white">
        <div class="w3-container">
         <h4 class="w3-center">My Profile</h4>
         <p class="w3-center"><img src="/w3images/avatar3.png" class="w3-circle" style="height:106px;width:106px" alt="Avatar"></p>
         <hr>
         <p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i> Designer, UI</p>
         <p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i> London, UK</p>
         <p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i> April 1, 1988</p>
        </div>
      </div>
      <br>
      <div class="w3-bar-block w3-card">
  
  <!-- <a href="usermain.html?type=myfeeds" id="myfeedssidelink"  class="w3-bar-item w3-button tablink">我的动态</a> -->
  <a href="usermain.html?type=mygroups" id="mygroupssidelink" class="w3-bar-item w3-button tablink">我的店铺</a>
  <a href="usermain.html?type=mycards" id="mycardssidelink"  class="w3-bar-item w3-button tablink">我的会员卡</a>
        </div>
      
      


    
    <!-- End Left Column -->
    </div>
    
    <!-- Middle Column -->
    <div class="w3-col m7">
    
      <div  class="w3-bar">
    <button class="w3-bar-item w3-button tablink w3-red" onclick="openTabs(event,'groupmembers')">店铺会员</button>
    <!-- <button class="w3-bar-item w3-button tablink" onclick="openTabs(event,'groupfeeds')">店铺动态</button>  -->
    <button class="w3-bar-item w3-button tablink" onclick="openTabs(event,'groupsetting')">店铺设置</button>
      </div>
      
      <div id="groupmembers" class="w3-container w3-border tab">
      <div class="w3-container w3-card w3-white w3-round w3-margin"><br>
        <button type="button" onclick="showAddMemberUI(true)" class="w3-button w3-green">Add Member</button>
        <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="filterFunction()">
        <div id="memberlist" class="w3-container">

        </div>
      </div>
      </div>
<!--
      <div id="groupfeeds" class="w3-container w3-border tab" style="display:none">
         <div class="w3-container w3-card w3-round w3-margin">

        <header class="w3-container w3-light-grey">
          <h3>Group 1</h3>
        </header>

        <div class="w3-container">
          <p>新会员请求:</p>
          <hr>
          <img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
          <p>President/CEO at Mighty Schools...</p>
        </div>

        <button class="w3-button w3-block w3-dark-grey">Manage</button>

        </div> 
      </div>
-->
      <div id="groupsetting" class="w3-container w3-border tab" style="display:none">
         <div class="w3-container w3-card w3-round w3-margin">

        <header class="w3-container w3-light-grey">
          <h3>Group 1</h3>
        </header>

        <div class="w3-container">
          <p>通知: </p>
          <hr>
          <img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
          <p>President/CEO at Mighty Schools...</p>
        </div>

        <button class="w3-button w3-block w3-dark-grey">查看</button>

        </div> 
      </div>

      
      
    <!-- End Middle Column -->
    </div>
    
    <!-- Right Column -->
    <div class="w3-col m2">
      <div class="w3-card w3-round w3-white w3-center">
	    <h4 class="w3-blue"> 操作事件 </h4>
        <div id="requestResult" class="w3-container" style="height: 600px;overflow: auto;">
		
        </div>
      </div>
      <br>
      
    <!-- End Right Column -->
    </div>
    
  <!-- End Grid -->
  </div>
  
<!-- End Page Container -->
</div>
<br>

<!-- Footer -->
<footer class="w3-container w3-theme-d3 w3-padding-16">
  <h5>Footer</h5>
</footer>


<script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="./js/table.js"></script>
<script>
initialize('hqD9IMTNsFSk2LxbiFnBEvCp-gzGzoHsz','ITs4Ni1EiEI5sEcQQ4CBJqpb');
const GROUPS="groups";
const GROUPMEMBERS="groupmembers";
const GROUPMSG="groupmsg";
const MEMBERMSG="membermsg";
var g_group={};
var g_grpid = getParameter("grpid");
var g_grpObj;
var g_userid;
if(!currentUser())
{
   window.location.href="login.html";
}
else

{
	var onQuerySuccess = function(tablename, tobj)
	{
	//console.log("New object created on " + tablename + " with objectId: " + tobj.id );
    if(tablename === GROUPS)
    {   
	   g_grpObj = tobj;
	   showGroupProfile(tobj);
	   //create a msg for user to confirm;
    }else if(tablename === GROUPMSG)
    {    
      console.log("New object created on " + tablename + " with objectId: " + tobj.id );
    }

	}

    var onAddMemberSuccess= function(tablename, tobj)
    {
        if(tablename == GROUPMEMBERS)
        {
           showAddMemberUI(false);
           //create indicator to groupmsg;
           let rid=createTableItem(GROUPMSG, {"grpid":g_grpid,"cardid":tobj.id, "phone":tobj.get('mphone'),"answer":"0"},onAddMemberSuccess, onError);
           appendRequest(rid, "记录新会员");
           rid=findItemsEqualTo(GROUPMEMBERS, 'grpid', g_grpid, onQueryResult);
           appendRequest(rid, "刷新会员信息");
        }
        else if(tablename == GROUPMSG)
        {
            
        }
    }
    var onAddMemberError = function(tablename, tobj, error)
	{
	console.error("Failed to add member " + tablename + " with data:" + tobj +  " with error message: " + error.message);
	}
	var onError = function(tablename, tobj, error)
	{
	console.error("Failed to create " + tablename + " with data:" + tobj +  " with error message: " + error.message);
	}
    
	var onQueryResult=function(tablename, results)
	{
	   console.log(tablename);
	   console.log(results);
        if(tablename === GROUPMEMBERS)
            {
            showAllMembers(results);
            }
        
	}
	
	console.log(AV.User.current());
	if(g_grpid)
	{
    //get group profile
    let rid= findItemById(GROUPS, g_grpid, onQuerySuccess);
    appendRequest(rid, "获取店铺信息");
    //get group members
    rid= findItemsEqualTo(GROUPMEMBERS, 'grpid', g_grpid, onQueryResult);
    appendRequest(rid, "获取会员信息");
    
    }
    
	//var rid = createTableItem(GROUPS, {"ownerid":currentUser().id, "grpname":"group3", "grpaddr":"shanghai", "phone":"18939895003"}, onCreateSuccess, onError);
	//console.log(getRequestData(rid));
	//var rid2 = createTableItem(GROUPS, {"ownerid":currentUser().id, "grpname":"group4", "grpaddr":"shanghai", "phone":"18018661248"}, onCreateSuccess, onError);
	//console.log(getRequestData(rid2));
    

    
}
function showGroupProfile(obj)
{
  
		var dd = ele("groupprofile");
		var html ="";
        html += '<div class="w3-container"><h2>';
        html += obj.get("grpname");
        html += '</h2><p>';
        html += obj.get("grpaddr");
        html += '</p><p>';
        html += obj.get("phone");
        html += '</p></div>';
		
		dd.innerHTML = html;

}
function findPhone(phone)
{
   let rid = findItemsEqualTo(GROUPMEMBERS, 'mphone', phone, 
   function(tablename, results)
   {
      if(results.length > 0)
      {
      updateRequest(rid, "该号码已经存在");
      }
      else
      {
      
      }
   },
   function(tablename, error)
   {
   updateRequest(rid, -1);
   }
   );
   appendRequest(rid, "查找电话号码");
   return rid;
}
function addMember(e)
{
  if(e)
  {
  e.innerText="正在添加...";
  e.disabled = true;
  }
  var name = ele("mname").value;
  ele("mname").value="";
  var phone = ele("mphone").value;
  ele("mphone").value="";
  var email = ele("memail").value;
  ele("memail").value="";
  var jifen = ele("mjifen").value;
  ele("mjifen").value="";
  let rid = findItems(GROUPMEMBERS, 'mphone', phone, 'grpid', g_grpid,
   function(tablename, results)
   {
      if(results.length > 0)
      {
      updateRequest(rid, "该号码已经存在");
      }
      else
      {
      let rid2= addMemberToGroup(name,phone, email, jifen,g_grpid, "",onAddMemberSuccess, onAddMemberError);
      appendRequest(rid2, "添加会员");
      }
   },
   function(tablename, error)
   {
      updateRequest(rid, -1);
   }
   );
   
   appendRequest(rid, "查找电话号码*"+phone.substr(-4));
   return rid;
  
 /*
  // 新建 AVUser 对象实例
  var user = new AV.User();
  user.set('realname', mname);
  // 设置用户名
  user.setUsername(phone);
  // 设置密码
  user.setPassword("8888");
  // 设置邮箱
  if(email)
     //email = "dummy@123.com";
      user.setEmail(email);
    
  user.setMobilePhoneNumber(phone);
  user.signUp().then(function (loggedInUser) {
      console.log(loggedInUser);
      addMemberToGroup(phone, email, jifen,g_grpid, loggedInUser.id, onAddMemberSuccess,onAddMemberError);
  }, function (error) {
  if(error.code == 214)
  {
      addMemberToGroup(phone, email, jifen,g_grpid, "",onAddMemberSuccess, onAddMemberError);
  }
  showErrors(error.message);
  });
  */
}
function addMemberToGroup(name,mphone, memail, jifen,grpid,mid, onSuccess, onError)
{
    return createTableItem(GROUPMEMBERS, {"mname":name, "grpid":grpid, "mphone":mphone, "memail":memail,"jifen":Number(jifen),"mid":mid},onSuccess, onError, [currentUser().id]);
}
function showAddMemberUI(show)
{
    ele("btn_addmember").disabled = false;
    ele("btn_addmember").innerText = "确定";
if(show)
    document.getElementById('id01').style.display='block';
else
    document.getElementById('id01').style.display='none';    
}


function createGroup(name, address,phone)
{
   let rid=increTableItem(GROUPMEMBERS, id, 'jifen', 100);
   appendRequest(rid,"新增积分");
}
function showConsumeJFUI(show)
{
    ele("btn_consumejf").disabled = false;
    ele("btn_consumejf").innerText = "确定";
if(show)
    document.getElementById('modal-consumejf').style.display='block';
else
    document.getElementById('modal-consumejf').style.display='none'; 
}
function showIncreJFUI(show)
{
    ele("btn_increjf").disabled = false;
    ele("btn_increjf").innerText = "确定";
if(show)
    document.getElementById('modal-increjf').style.display='block';
else
    document.getElementById('modal-increjf').style.display='none'; 
}
function onClickConsumeJF(id)
{
g_userid = id;
showConsumeJFUI(true);
}
function onClickIncreJF(id)
{
g_userid = id;
showIncreJFUI(true);
}
function ConsumeMemberJifen(id,amount)
{
//hook function to verify there is enough JF to consume;      
   if(amount <= 0)  
      return;
   let rid=increTableItem(GROUPMEMBERS, id, 'jifen', -amount, 
        function(obj)
        {
           showConsumeJFUI(false);
        },
        function(error)
        {
        });
   appendRequest(rid,"消费积分");
}

function IncreMemberJifen(id, amount)
{
   if(amount <= 0)  
      return;
   let rid=increTableItem(GROUPMEMBERS, id, 'jifen', amount,
        function(obj)
        {
           showIncreJFUI(false);
        },
        function(error)
        {
        });
   appendRequest(rid,"新增积分");
}
function removeMember(mid, phone)
{
    var r = confirm("Remove member?");
    if (r == true) {
        let rid=removeTableItem(GROUPMEMBERS, mid, 
            function(suc)
            {
          
            updateRequest(rid, 1);
            let rid2=findItemsEqualTo(GROUPMEMBERS, 'grpid', g_grpid, onQueryResult);
            appendRequest(rid2, "刷新会员信息");
            let rid3 = findItems(GROUPMSG,'grpid', g_grpid, 'phone', phone, 
            function(tablename, results)
                {
                AV.Object.destroyAll(results).then(
                function(objects)
                {
                   updateRequest(rid3, 1);
                }, 
                function(error)
                {
                   updateRequest(rid3, "删除出错"+error.message);
                });
                },
                function(tablename, error)
                {
                updateRequest(rid3, "查表出错"+error.message);
                });
            appendRequest(rid3, "删除辅助信息");
            },
            function(err)
            {
            updateRequest(rid, -1);
            console.log("error remove item"+mid);
            }
            );
                    
        appendRequest(rid,"删除会员");
    }
}
function showAllMembers(results)
{
	if(results.length == 0)
	{
	   	var dd = ele("memberlist");
		var html ="";
        html += '<div class="w3-container w3-card w3-round w3-margin">';
        html += '<h2>您还没有任何会员。</h2></div>';        
        dd.innerHTML = html;
	}
	else
	{
    	var dd = ele("memberlist");
		var html ='<ul class="w3-ul w3-margin-top" id="myUL">';
        var grp;
		for(var i=0;i<results.length;i++)
		{
        
        html += '<li class="w3-display-container">[';
        html += results[i].get("mname");
        html += ']';
        html += results[i].get("mphone");
        html += '<span onclick=onClickConsumeJF("';
        html += results[i].id;
        html += '") class="w3-button w3-green w3-round-large w3-transparent">-积分</span>';
        html += '<span onclick=onClickIncreJF("';
        html += results[i].id;
        html += '") class="w3-button w3-green w3-round-large w3-transparent ">+积分</span>';
        html += '<span onclick=removeMember("';
        html += results[i].id;
        html += '","';
        html += results[i].get("mphone");
        html += '") class="w3-button w3-red w3-transparent w3-display-right">删除</span></li>';
  
		}
        html += '</ul>';
		dd.innerHTML = html;
	}
}

function clickGroupDropdown() {
  var x = document.getElementById("groupdropdown");
  if (x.className.indexOf("w3-show") == -1) {  
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}

function openTabs(evt, tabName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    txtValue = li[i].textContent || li[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html> 
